<template>
  <section>
    <el-form label-width="80px" inline >
      <el-form-item label="" >
        <el-row style="display: flex;flex-direction: row;width: 100%">
          <filter-tool class="filtertool" type="categoryId" test="name" v-on:confirm="filterEvent"></filter-tool>
        </el-row>
      </el-form-item>
      <el-form-item label="" >
        <search-tool v-on:search="searchProductEvent"></search-tool>
      </el-form-item>
      <el-form-item label="" style="float: right;margin-right: 20%" >
        <el-button size="mini"  @click="loadBtn">
          <i class="el-icon-download" style="color:blue"/>导入
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="inventory" @selection-change="selProductSkusEvent" v-loading="loading">
      <el-table-column type="selection" width="55"/>
      <el-table-column type="index" label="序号"/>
      <el-table-column label="标题" prop="product.name"></el-table-column>
      <el-table-column label="属性" prop="props"></el-table-column>
      <el-table-column label="单位" prop="unit"></el-table-column>
      <el-table-column label="sn" prop="sn"></el-table-column>
      <el-table-column label="实际库存" prop="realityStock"></el-table-column>
      <el-table-column label="虚拟库存" prop="virtualStock"></el-table-column>
      <!--<el-table-column label="操作">
      <template slot-scope="scope">
        <i class="el-icon-download" style="color:blue" @click="loadBtn(scope.row)"/>
          </template>
        </el-table-column>-->
    </el-table>
    <el-pagination v-show="totalPage>0" small layout="prev, pager, next" :page-count="totalPage" @current-change="goPage"/>
  </section>
</template>

<script>
  import searchTool from '@/common/searchTool'
  import filterTool from '@/common/filterTool'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "loadByStock",
    components:{filterTool,searchTool},
    props:['companyId'],
    data(){
      return{
        totalPage:0,
        inventory:null,
        loading:false,
        selProductSkus:null
      }
    },
    created(){
      this.getInventory()
    },
    computed:{
      ...mapGetters(['department']),
    },
    watch: {
      companyId(nv,ov){
        if(nv){
          this.getInventory()
        }
      }
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      goPage(val){
        this.getInventory(val-1,this.filterObj)
      },
      getInventory(pageNo,filterObj){
        // console.log('筛选参数----------',filterObj)
        if(this.companyId === undefined){
          this.$message({type:'error',message:'请先选择公司'})
          this.inventory=[]
          return
        }
        this.loading=true
        this.fetch({name:"getProductList",data:{page:pageNo?pageNo:0,...filterObj,companyId:this.companyId}})
          .then(res=>{
            this.productList=res.content
            this.totalPage=res.totalPages
            if(res.content.length <=0) return
            let skus=[]
            res.content.forEach(r=>{
              r.productSpecs.forEach(p=>{
                Vue.set(p,'product',{
                  name:r.name,id:r.id,categoryList:r.data.categoryList,properties:r.properties
                })
                skus.push(p)
              })
            })
            // console.log('skus的集合--------',skus)
            this.inventory=[]
            this.getStock(skus)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getStock(array){
        console.log('array是啥--------',array.length)
        this.fetch({name:"getStock",data:{sn:array[0].sn}})
          .then(res=>{
            console.log('获得库存了么-----------',res)
            if(res.length >0){
              let currOwner=res.find(r=>r.ownerId === this.companyId)
              Vue.set(array[0],'realityStock',currOwner.realityStock)
              Vue.set(array[0],'virtualStock',currOwner.virtualStock)
              Vue.set(array[0],'unit',currOwner.unit)
              this.inventory.push(array[0])
            }
            array.splice(0,1)
            if(array.length>0){
              this.getStock(array)
            }else {
              console.log('一个产品的skus轮完了。。。',this.inventory)
              this.loading=false
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      selProductSkusEvent(e){
        this.selProductSkus=e
      },
      filterEvent(e,objK){
        console.log('筛选条事件---------',e,objK)
        for(let key in e){
          if(objK === undefined) this.filterObj[key]=e[key]
          else this.filterObj[objK]=e[key]
        }
        console.log('看下filterObj----------',this.filterObj)
        let tmp={}
        for(let k in this.filterObj){
          if(this.filterObj[k] !== undefined){
            tmp[k]=this.filterObj[k]
          }
        }
        console.log('看下tmp----------',tmp)
        this.getInventory(0,tmp)//筛选出库单列表
      },
      searchProductEvent(e){
        this.filterObj.key=e
        this.getInventory(0,this.filterObj)
      },
      loadBtn(){
        this.$emit('confirm',this.selProductSkus)
      }
    }
  }
</script>

<style scoped>

</style>
